<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.name }}</div>
    <!-- 表格操作 -->
    <div class="operation-container">
      <!-- 条件筛选 -->
      <div class="operation-container">
        <!-- 状态  -->
        <el-radio-group v-model="appointmentStatus" style="margin-right: 23.3rem" size="medium" @change="agreeChange">
          <el-radio :label="null" size="medium">全部</el-radio>
          <el-radio :label="0" size="medium">待就诊</el-radio>
          <el-radio :label="1" size="medium">已就诊</el-radio>
          <el-radio :label="2" size="medium">已取消</el-radio>
        </el-radio-group>
        <!--  时间选择 -->
        <el-date-picker
            v-model="appointmentDate"
            type="daterange"
            align="right"
            unlink-panels
            size="small"
            style="margin-right:1rem"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>

        <!-- 科室 -->
        <el-cascader :options="departmentList" v-model="departmentId" :show-all-levels="false"
                     placeholder="请选择科室" clearable size="small" style="margin-right:1rem" @change="cascaderChange"
                     ref="cascader">
        </el-cascader>
        <!-- 职称 -->

        <el-input
            v-model="keywords"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="请输入医生/患者姓名"
            style="width:200px"
            @keyup.enter.native="searchUsers"
        />
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="searchUsers"
        >
          搜索
        </el-button>
      </div>
    </div>
    <!-- 表格展示 -->
    <el-table border :data="appointmentList" v-loading="loading" max-height="950">
      <el-table-column
          prop="patientName"
          label="患者姓名"
          align="center"
          width="150"
          fixed
      >
        <template slot-scope="scope">
          {{ scope.row.patientName }}
          <i v-if="scope.row.sex == 0" class="el-icon-female" style="margin-left:5px"/>
          <i v-if="scope.row.sex == 1" class="el-icon-male" style="margin-left:5px"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="idNumber"
          label="身份证号"
          align="center"
          width="190"
          show-overflow-tooltip
      />
      <el-table-column
          prop="phone"
          label="手机号"
          align="center"
          width="140"
          show-overflow-tooltip
      />
      <el-table-column
          prop="departmentName"
          label="挂号科室"
          align="center"
          width="170"
          show-overflow-tooltip
      />
      <el-table-column
          prop="doctorName"
          label="预约医生"
          align="center"
          width="140"
          show-overflow-tooltip
      />
      <el-table-column
          prop="appointmentTime"
          label="预约时间"
          width="190"
          align="center"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.createTime | dateTime }}
        </template>
      </el-table-column>
      <el-table-column
          prop="registrationType"
          label="挂号类型"
          align="center"
          width="100"
          show-overflow-tooltip
      />
      <el-table-column
          prop="registrationFee"
          label="挂号费"
          align="center"
          width="80"
          show-overflow-tooltip
      />
      <el-table-column
          prop="appointmentStatus"
          label="挂号状态"
          align="center"
          width="80"
          show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.appointmentStatus == 0">待就诊</el-tag>
          <el-tag v-if="scope.row.appointmentStatus == 1">已就诊</el-tag>
          <el-tag type="danger" v-if="scope.row.appointmentStatus == 2">已取消</el-tag>
          <el-tag type="success" v-if="scope.row.appointmentStatus == 3">已评价</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop="createTime"
          label="创建时间"
          width="190"
          align="center"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.createTime | dateTime }}
        </template>
      </el-table-column>
      <!-- 列操作 -->
      <el-table-column label="操作" align="center" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button
              type="primary"
              size="mini"
              @click="openModel(scope.row)"
              style="margin-right: 0.1rem"
          >
            <i class="el-icon-view"/>查看
          </el-button>
          <el-button
              type="primary"
              size="mini"
              @click="deleteAppointment(scope.row.id)"
          >
            <i class="el-icon-delete"/>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="pagination-container"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-size="size"
        :total="count"
        :page-sizes="[10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 修改对话框 -->
    <el-dialog :visible.sync="appointmentDetail" width="70%">
      <div class="dialog-title-container-app" slot="title" ref="appointmentDetail"/>
      <el-descriptions class="margin-top" title="患者信息" :column="4" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            患者姓名
          </template>
          {{ appointmentForm.patientName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            就诊卡号
          </template>
          {{ appointmentForm.cardNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            身份号
          </template>
          {{ appointmentForm.idNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ appointmentForm.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            性别
          </template>
          <el-tag size="small" v-if="appointmentForm.sex == 0">男</el-tag>
          <el-tag size="small" v-if="appointmentForm.sex == 1" type="success">女</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            年龄
          </template>
          {{patient.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            文化程度
          </template>
          {{patient.cultureStandard}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            民族
          </template>
          {{patient.nation}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            国籍
          </template>
          {{patient.nationality}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            婚姻状态
          </template>
          {{patient.marriage}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            职业
          </template>
          {{patient.occupation}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            户别
          </template>
          <el-tag size="small" v-if="patient.household == 0">农业</el-tag>
          <el-tag size="small" v-if="patient.household == 1">非农</el-tag>
          <el-tag size="small" v-if="patient.household == 2" type="info">不详</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            常驻类型
          </template>
          <el-tag size="small" v-if="patient.residentType == 0">户籍</el-tag>
          <el-tag size="small" v-if="patient.residentType == 1">非户籍</el-tag>
          <el-tag size="small" v-if="patient.residentType == 2" type="info">不详</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            常驻类型
          </template>
          <el-tag size="small" v-if="patient.residentType == 0">户籍</el-tag>
          <el-tag size="small" v-if="patient.residentType == 1">非户籍</el-tag>
          <el-tag size="small" v-if="patient.residentType == 2" type="info">不详</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            血型
          </template>
          <el-tag size="small">{{patient.bloodType}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            身高
          </template>
          <el-tag size="small">{{patient.height}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            体重
          </template>
          <el-tag size="small">{{patient.weight}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            腰围
          </template>
          <el-tag size="small">{{patient.waistLine}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            臀围
          </template>
          <el-tag size="small">{{patient.hipLine}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            暴露史
          </template>
          <el-tag size="small" v-if="patient.exposureHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.exposureHistory == 1" type="danger">有</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            药物过敏史
          </template>
          <el-tag size="small" v-if="patient.drugAllergyHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.drugAllergyHistory == 1" type="danger">有</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            遗传病史
          </template>
          <el-tag size="small" v-if="patient.geneticHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.geneticHistory == 1" type="danger">有</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            残疾情况
          </template>
          <el-tag size="small" v-if="patient.disabilityHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.disabilityHistory == 1" type="danger">有</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            吸烟史
          </template>
          <el-tag size="small" v-if="patient.smokingHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.smokingHistory == 1" type="danger">有</el-tag>
          <el-tag size="small" v-if="patient.smokingHistory == 2" type="success">已戒</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            饮酒史
          </template>
          <el-tag size="small" v-if="patient.drinkHistory == 0">无</el-tag>
          <el-tag size="small" v-if="patient.drinkHistory == 1" type="danger">有</el-tag>
          <el-tag size="small" v-if="patient.drinkHistory == 2" type="success">已戒</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            体育锻炼
          </template>
          <el-tag size="small" v-if="patient.physicalExercise == 0">无</el-tag>
          <el-tag size="small" v-if="patient.physicalExercise == 1" type="success">有</el-tag>
          <el-tag size="small" v-if="patient.physicalExercise == 2" type="danger">无规律</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            睡眠时间
          </template>
          <el-tag size="small">{{patient.sleepTime}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            睡觉情况
          </template>
          <el-tag size="small">{{patient.sleepCase}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>



      <el-descriptions class="margin-top" title="预约信息" :column="3" size="medium" border style="margin-top: 50px">
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            就诊医院
          </template>
          {{appointmentForm.hospitalName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            医院地址
          </template>
          {{appointmentForm.location}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            就诊科室
          </template>
          {{appointmentForm.departmentName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            就诊医生
          </template>
          {{appointmentForm.doctorName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            医生职称
          </template>
          <el-tag size="small">{{appointmentForm.professional}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            挂号类型
          </template>
          <el-tag size="small">{{appointmentForm.registrationType}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            挂号费
          </template>
          <el-tag size="small" type="danger">￥{{appointmentForm.registrationFee}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            预约时间
          </template>
          {{appointmentForm.appointmentTime | date}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            时间段
          </template>
          <el-tag size="small" v-if="appointmentForm.timeQuantum == 0">上午</el-tag>
          <el-tag size="small" v-if="appointmentForm.timeQuantum == 1">下午</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            就诊状态
          </template>
          <el-tag size="small" v-if="appointmentForm.appointmentStatus == 0" type="info">待就诊</el-tag>
          <el-tag size="small" v-if="appointmentForm.appointmentStatus == 1">已就诊</el-tag>
          <el-tag size="small" v-if="appointmentForm.appointmentStatus == 2" type="danger">已取消</el-tag>
          <el-tag size="small" v-if="appointmentForm.appointmentStatus == 3" type="success">已评价</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="appointmentForm.appointmentStatus == 2">
          <template slot="label">
            <i class="el-icon-tickets"></i>
            取消原因
          </template>
          {{appointmentForm.cancelReason}}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer">
        <el-button @click="appointmentDetail = false">取 消</el-button>
        <el-button type="primary" @click="appointmentDetail = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created() {
    this.listAppointments();
    this.listDepartments();
  },
  data: function () {
    return {
      headers: this.$store.state.headers,
      appointmentStatus: null,
      loading: true,
      appointmentDetail: false,
      show: true,
      appointmentForm: {},
      patient: {},
      appointmentDate: "",
      startTime: "",
      endTime: "",
      departmentId: null,
      appointmentList: [],
      departmentList: [],
      keywords: null,
      current: 1,
      size: 10,
      count: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  methods: {
    searchUsers() {
      this.current = 1;
      this.listAppointments();
    },
    sizeChange(size) {
      this.size = size;
      this.listAppointments();
    },
    currentChange(current) {
      this.current = current;
      this.listAppointments();
    },
    //预约详情
    openModel(item) {
      console.log(item)
      this.$refs.appointmentDetail.innerHTML = "挂号详情";
      this.appointmentForm = JSON.parse(JSON.stringify(item));
      this.axios.get("/api/admin/user/patient/" + item.patientId,{})
          .then(({data}) => {
            console.log("data",data.data)
            this.patient = data.data;
          })
      this.appointmentDetail = true;
    },
    //状态查询
    agreeChange() {
      this.listAppointments();
    },
    //科室级联选择器
    cascaderChange() {
      this.departmentId = this.$refs["cascader"].getCheckedNodes()[0].value;
    },
    //删除
    deleteAppointment(id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete("/api/admin/user/deleteAppointment/" + id).then(({data}) => {
          if (data.flag) {
            this.$notify.success({
              title: "成功",
              message: "删除成功"
            });
            this.listAppointments();
          } else {
            this.$notify.error({
              title: "失败",
              message: "删除失败"
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //预约列表
    listAppointments() {
      this.axios
          .get("/api/admin/listAppointment", {
            params: {
              current: this.current,
              size: this.size,
              keywords: this.keywords,
              departmentId: this.departmentId,
              status: this.appointmentStatus,
              startTime: this.appointmentDate[0],
              endTime: this.appointmentDate[1],
            }
          })
          .then(({data}) => {
            this.appointmentList = data.data.recordList;
            this.count = data.data.count;
            this.loading = false;
          });
    },
    //科室列表
    listDepartments() {
      this.axios
          .get("/api/admin/listDepartment", {})
          .then(({data}) => {
            this.departmentList = data.data;
          });
    }
  },
};
</script>
